<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Blockly Demo: Custom Turtle Field</title>
    <script src="./node_modules/blockly/blockly_compressed.js"></script>
    <script src="blocks.js"></script>
    <script src="field_turtle.js"></script>
    <script src="https://unpkg.com/blockly/msg/en.js"></script>
    <style>
      body {
        margin: 0 10%;
        background-color: #fff;
        font-family: sans-serif;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
      }
      td {
        padding: 1ex;
      }
      img {
        border: none;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="turtle.css" />
  </head>
  <body onload="start()">
    <p>
      This is a demo of creating custom block fields. In this case the field is
      used to define a turtle.
    </p>

    <p>
      &rarr; More info on
      <a
        href="https://developers.google.com/blockly/guides/create-custom-blocks/fields/customizing-fields/creating"
        >creating a custom field</a
      >&hellip;
    </p>

    <p>
      Click on the blocks' comment icons to learn what they are demonstrating.
      Use the buttons below to see how the fields react to changes.
    </p>

    <p>
      <input
        type="button"
        value="set random style"
        onclick="setRandomStyle()" />
      <input type="button" value="toggle shadow" onclick="toggleShadow()" />
      <input type="button" value="toggle enabled" onclick="toggleEnabled()" />
      <input type="button" value="toggle editable" onclick="toggleEditable()" />
      <input
        type="button"
        value="toggle collapsed"
        onclick="toggleCollapsed()" />
    </p>

    <p>
      <input type="button" value="Export to XML" onclick="toXml()" />
      <input type="button" value="Import from XML" onclick="fromXml()" />
    </p>

    <table>
      <tr>
        <td>
          <textarea
            id="importExport"
            style="width: 200px; height: 480px"
            onchange="textAreaChange();"
            onkeyup="textAreaChange()"></textarea>
        </td>
        <td>
          <div id="blocklyDiv" style="width: 600px; height: 480px"></div>
        </td>
      </tr>
    </table>

    <script>
      function toXml() {
        var output = document.getElementById('importExport');
        var xml = Blockly.Xml.workspaceToDom(workspace);
        output.value = Blockly.Xml.domToPrettyText(xml);
        output.focus();
        output.select();
      }

      function fromXml() {
        var input = document.getElementById('importExport');
        var xml = Blockly.utils.xml.textToDom(input.value);
        Blockly.Xml.domToWorkspace(xml, workspace);
      }

      function setRandomStyle() {
        var blocks = workspace.getAllBlocks(false);
        var styles = Object.keys(
          workspace.getRenderer().getConstants().blockStyles,
        );
        styles.splice(styles.indexOf(blocks[0].getStyleName()), 1);
        var style = styles[Math.floor(Math.random() * styles.length)];
        for (var i = 0, block; (block = blocks[i]); i++) {
          block.setStyle(style);
        }
      }

      function toggleShadow() {
        var blocks = workspace.getAllBlocks(false);
        for (var i = 0, block; (block = blocks[i]); i++) {
          block.setShadow(!block.isShadow());
        }
      }

      function toggleEnabled() {
        var blocks = workspace.getAllBlocks(false);
        for (var i = 0, block; (block = blocks[i]); i++) {
          block.setEnabled(!block.isEnabled());
        }
      }

      function toggleEditable() {
        Blockly.hideChaff();
        var blocks = workspace.getAllBlocks(false);
        for (var i = 0, block; (block = blocks[i]); i++) {
          block.setEditable(!block.isEditable());
        }
      }

      function toggleCollapsed() {
        Blockly.hideChaff();
        var blocks = workspace.getAllBlocks(false);
        for (var i = 0, block; (block = blocks[i]); i++) {
          block.setCollapsed(!block.isCollapsed());
        }
      }

      function appendDom() {
        var blocks = document.getElementById('workspace-blocks');
        if (blocks.firstElementChild) {
          Blockly.Xml.appendDomToWorkspace(blocks, workspace);
        }
      }

      function start() {
        workspace = Blockly.inject('blocklyDiv', options);
        appendDom();
        workspace.scrollCenter();
      }

      var options = {
        media: './node_modules/blockly/media/',
        grid: {
          spacing: 25,
          length: 3,
          colour: '#ccc',
        },
        move: {
          scrollbars: true,
          drag: true,
          wheel: true,
        },
        zoom: {
          controls: true,
          startScale: 1.0,
          maxScale: 4,
          minScale: 0.25,
          scaleSpeed: 1.1,
        },
        /*toolbox: document.getElementById('toolbox')*/
      };
    </script>

    <xml
      xmlns="https://developers.google.com/blockly/xml"
      id="workspace-blocks"
      style="display: none">
      <block type="turtle_basic"></block>
      <block type="turtle_nullifier" y="120"></block>
      <block type="turtle_changer" y="230"></block>
    </xml>
  </body>
</html>
